<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        pre {
            border: 1px dashed #666;
            padding: 10px;
            white-space: pre-wrap;
        }

        arrow {
            font-size: 30px;
            color: red;
        }

        red {
            color: red;
        }

        [\$for] {
            color: blue;
        }

        body {
            display: grid;
            gap: 20px;
            grid-template-rows: 60px 1fr;
            grid-template-columns: 50% 50%;
        }

        h1 {
            grid-column: span 2;
        }

        .ball{
            width: 50px;
            height: 50px;
            background-color:cornflowerblue;
            transition: .3s;
        }
        .ball.active{
            transform: translateX(200px);
        }

        @keyframes slide {
            to {
                background-color: darksalmon;
            }
        }
    </style>
    <script>
        function fn() {
            alert(1)
        }
    </script>
</head>

<body>
    <h1>web-template.js</h1>
    <div class="left">
        <pre>&lt;template id="template" rule="v-"&gt;
    &lt;h2 class="${title}"&gt;<red>${title}</red>&lt;/h2&gt;
    &lt;h3 <red>v-if="showh3"</red>&gt;h3:${title}&lt;/h3&gt;
    &lt;h4 v-if="showh4"&gt;h4:${title}&lt;/h4&gt;
    &lt;ul class="list"&gt;
        &lt;li class="item" v-for="list" <red>key="${item.id}"</red>&gt;
            &lt;input type="checkbox" &gt;
            &lt;strong&gt;[key = ${item.id}]&lt;/strong&gt;
            ${ item.message }&lt;span&gt;${parseInt(item.num)}&lt;/span&gt;
            &lt;div&gt;&lt;i v-for="el in item.tag"&gt;${index+1}.${el} &lt;/i&gt;&lt;/div&gt;
            &lt;input&gt;
            &lt;button disabled="${item.disabled}"&gt;查看&lt;/button&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul class="demo"&gt;
        &lt;li <red>v-for="(value,name,index) of object"</red>&gt;
            ${ index  } - ${ name  } : ${ value  }
        &lt;/li&gt;
    &lt;/ul&gt;
    &lt;div v-for="[1,2,3,4,5].reverse()"&gt;${item}&lt;/div&gt;
    乘法表
    &lt;div v-for="i in [1,2,3,4,5,6,7,8,9]"&gt;
        &lt;span v-for="j in [1,2,3,4,5,6,7,8,9]" v-if="i&gt;=j"&gt; ${i*j} &lt;/span&gt;
    &lt;/div&gt;
&lt;/template&gt;
</pre>

        <arrow>+</arrow>

        <pre>const data = {
        title: 'Title',
        showh3: true,
        showh4: false,
        object: {
            title: 'How to do lists in Vue',
            author: 'Jane Doe',
            publishedAt: '2016-04-10'
        },
        list: [
            {
                id: "1",
                message: '特朗普拒与拜登分享总统每日简报荐',
                num: '482万',
                tag: ['A', 'B', 'C'],
                disabled: true
            },
            {
                id: "2",
                message: '最高法指令再审"百香果女孩"案新',
                num: '465万',
                tag: ['A', 'B'],
                disabled: true
            },
            {
                id: "3",
                message: '拜登称特朗普拒认败选很尴尬沸',
                num: '449万',
                tag: ['A', 'B'],
                disabled: true
            }
        ]
    }
}
</pre>



        <pre><red>template.mount(res.data)</red></pre>
    </div>


    <div class="right">
        <button id="toggle">切换数据源</button>
        <input type="checkbox" id="diff"><label for="diff">是否开启 dom-diff</label>
        <div is="template"></div>
    </div>

    <template id="template" rule="v-">

            <h2 class="${title}" data-title="${title}">${title}</h2>
            <h3 v-if="showh3">h3:${title}</h3>
            <h3 v-show="showh3">h3:${title}</h3>
            <div class="ball" :class="{active:showh3,m:showh4}"></div>
            <h4 v-if="showh4">h4:${title}</h4>
            <h4 hidden="${showh4}">hidden:h4:${title}</h4>
            <ul class="list">
                <li class="item" v-for="(item,index) in list" :key="item.id">
                    <input type="checkbox" v-model="list[index].disabled">
                    <strong>[key = ${item.id}]</strong>
                    ${ item.message }<span>${parseInt(item.num)}</span>
                    <div><i v-for="(el, m) in list[index].tag">${m+list[index].tag[m]}</i></div>
                    <input>
                    <button disabled="${item.disabled}">查看</button>
                </li>
            </ul>
            <ul class="demo">
                <li v-for="(value,name,index) of object">
                    ${ index } - ${ name } : ${ value }
                </li>
            </ul>
            <div v-for="[1,2,3,4,5].reverse()">{{item}}</div>
            乘法表
            <div v-for="i in [1,2,3,4,5,6,7,8,9]">
                <span v-for="j in [1,2,3,4,5,6,7,8,9]" v-if="i>=j"> ${i*j} </span>
            </div>

    </template>
    
    <script src="./web-template.js"></script>
    <script src="./web-diff.js"></script>

    <script>





        var res = {
            code: 0,
            data: {
                title: 'Title',
                showh3: true,
                showh4: false,
                object: {
                    title: 'How to do lists in Vue',
                    author: 'Jane Doe',
                    publishedAt: '2016-04-10'
                },
                list: [
                    {
                        id: "1",
                        message: '特朗普拒与拜登分享总统每日简报荐',
                        num: '482万',
                        tag: ['A', 'B', 'C'],
                        disabled: true
                    },
                    {
                        id: "2",
                        message: '最高法指令再审百香果女孩案新',
                        num: '465万',
                        tag: ['A', 'B'],
                        disabled: true
                    },
                    {
                        id: "3",
                        message: '拜登称特朗普拒认败选很尴尬沸',
                        num: '449万',
                        tag: ['A', 'B'],
                        disabled: true
                    }
                ]
            }
        }


        var res2 = {
            code: 0,
            data: {
                title: '22Title',
                showh3: false,
                showh4: false,
                object: {
                    title: 'How to do lists in Vue',
                    author: 'Jane Doe',
                    publishedAt: '2016-04-10'
                },
                list: [
                    {
                        id: "2",
                        message: '天津一无症状感染者转为确诊病例',
                        num: '433万',
                        tag: ['A', 'C'],
                        disabled: false
                    },
                    {
                        id: "4",
                        message: '度小店 11.11好物新知节热',
                        num: '403万',
                        tag: ['A'],
                        disabled: false
                    },
                    {
                        id: "1",
                        message: 'new 度小店 11.11好物新知节热',
                        num: '14403万',
                        tag: ['A', 'B'],
                        disabled: false
                    },
                    {
                        id: "5",
                        message: 'new 度小店 11.11好物新知节热',
                        num: '14403万',
                        tag: ['A'],
                        disabled: true
                    },
                ]
            }
        }

        console.time('init')

        template.mount(res.data)
        // template.model({
        //     data: {
        //         title: '默认标题',
        //         showh3: false,
        //         showh4: false,
        //         object: {},
        //         checked: false,
        //         list: [{
        //                 id: "1",
        //                 message: '特朗普拒与拜登分享总统每日简报荐',
        //                 num: '482万',
        //                 tag: ['A', 'B', 'C'],
        //                 disabled: true
        //             },
        //             {
        //                 id: "2",
        //                 message: '最高法指令再审"百香果女孩"案新',
        //                 num: '465万',
        //                 tag: ['A', 'B'],
        //                 disabled: true
        //             }
        //         ]
        //     },
        //     methods: {
        //         showId(item){
        //             console.log(item)
        //             console.log(this)
        //             console.log(event)
        //             // this.title = ev.target.textContent
        //         },
        //         change(e){
        //             console.log(event)
        //             this.checked = !this.checked
        //         }
        //     },
        //     init(){
        //         console.log('初始化完成')
        //         console.log(this)
        //     }
        // })
        
        console.timeEnd('init')

        toggle.onclick = function(){
            console.time('render')
            if(this.flag){
                template.mount(res.data, diff.checked)
            }else{
                template.mount(res2.data, diff.checked)
            }
            console.timeEnd('render')
            this.flag = !this.flag;
        }

    </script>


</body>

</html>